<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>用户编辑</title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        #roleList {
            margin-left: 0 !important;
            padding: 0 !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            text-align: left;
            width: 100%;
            max-width: 100%;
        }

        #roleList>.layui-input-block {
            display: flex;
            flex-direction: column;
            border: 1px solid #f0f0f0;
            background: #fafbfc;
            border-radius: 4px;
            width: 100%;
            max-width: 100%;
            padding: 0;
            margin: 0;
            box-shadow: none;
        }

        #roleList .menulist {
            flex: 1 1 auto;
            max-height: 180px;
            overflow-y: auto;
            border-radius: 4px 4px 0 0;
            padding: 10px;
            margin: 0;
            background: transparent;
            display: flex;
            flex-wrap: wrap;
        }

        #roleList .menulist dt {
            width: 23%;
            min-width: 180px;
            margin-bottom: 10px;
            margin-right: 1%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            justify-content: flex-start;
        }

        #roleList .menulist dt:nth-child(4n) {
            margin-right: 0;
        }

        #roleList .cbxmenu-font {
            margin-left: 4px;
        }

        #roleList>.layui-form-item+.layui-form-item>.layui-input-block,
        #roleList>.layui-input-block>.winui-btn,
        #roleList>.layui-input-block>button {
            display: none;
        }

        /* 管理员角色强制隐藏样式 */
        .admin-hide {
            display: none !important;
        }
    </style>
</head>

<body>
    <div style="padding:20px; margin:0 auto;">
        <form class="layui-form" action="" id="showForm">

        </form>
    </div>

    <script type="text/x-handlebars-template" id="beanTemplate">
        {{#bean}}
        <div class="layui-form-item layui-col-xs12">
            <span class="hr-title">基础信息</span><hr>
        </div>
        <input type="hidden" id="id" name="id" value="{{id}}" />
        <input type="hidden" id="staffId" name="staffId" value="{{staffId}}" />
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block ver-center" id="userName">
                {{staffMation.userName}}
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">籍贯<i class="red">*</i></label>
            <div class="layui-input-block">
                <input type="text" id="nativePlace" name="nativePlace" win-verify="required" placeholder="请输入籍贯" class="layui-input" maxlength="50" value="{{nativePlace}}"/>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">婚姻状况<i class="red">*</i></label>
            <div class="layui-input-block">
                <select id="maritalStatus" name="maritalStatus" win-verify="required">
                    <option value="">请选择</option>
                    <option value="1" {{#equal maritalStatus "1"}}selected{{/equal}}>已婚</option>
                    <option value="2" {{#equal maritalStatus "2"}}selected{{/equal}}>未婚</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">政治面貌<i class="red">*</i></label>
            <div class="layui-input-block">
                <select id="politicId" name="politicId" win-verify="required">
                    <option value="">请选择</option>
                    <!-- 此处可以通过AJAX获取政治面貌数据 -->
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">最高学历<i class="red">*</i></label>
            <div class="layui-input-block">
                <select id="highestEducation" name="highestEducation" win-verify="required">
                    <option value="">请选择</option>
                    <!-- 此处使用数据字典EMPLOYEE_EDUCATION -->
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">是否管理员<i class="red">*</i></label>
            <div class="layui-input-block ver-center">
                <span id="isAdminText">{{#equal isAdmin 1}}是{{else}}否{{/equal}}</span>
                <input type="hidden" id="isAdmin" name="isAdmin" value="{{isAdmin}}" />
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">入职时间<i class="red">*</i></label>
            <div class="layui-input-block">
                <input type="text" id="entryTime" name="entryTime" win-verify="required" placeholder="请选择入职时间" class="layui-input" value="{{entryTime}}" readonly/>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">参加工作时间<i class="red">*</i></label>
            <div class="layui-input-block">
                <input type="text" id="workTime" name="workTime" win-verify="required" placeholder="请选择参加工作时间" class="layui-input" value="{{workTime}}"/>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6">
            <label class="layui-form-label">在职状态<i class="red">*</i></label>
            <div class="layui-input-block">
                <select id="state" name="state" lay-filter="stateFilter" win-verify="required">
                    <option value="">请选择</option>
                    <option value="1" {{#equal state 1}}selected{{/equal}}>在职(转正的员工)</option>
                    <option value="2" {{#equal state 2}}selected{{/equal}}>离职</option>
                    <option value="3" {{#equal state 3}}selected{{/equal}}>见习(用于实习生)</option>
                    <option value="4" {{#equal state 4}}selected{{/equal}}>试用期(用于未转正的员工)</option>
                    <option value="5" {{#equal state 5}}selected{{/equal}}>退休</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-col-xs6" id="trialTimeBox" {{#equal state 4}}style="display: block;"{{else}}style="display: none;"{{/equal}}>
            <label class="layui-form-label">试用期到期时间<i class="red">*</i></label>
            <div class="layui-input-block">
                <input type="text" id="trialTime" name="trialTime" placeholder="请选择试用期到期时间" class="layui-input" value="{{trialTime}}" readonly/>
            </div>
        </div>
        
        <div class="layui-form-item layui-col-xs12">
            <span class="hr-title">职位信息</span><hr>
        </div>
        <div class="layui-form-item layui-col-xs12">
            <label class="layui-form-label">职位信息<i class="red">*</i></label>
            <div class="layui-input-block">
                <div class="layui-col-xs3">
                    <ul id="companyTree" class="dtree" data-id="0" style="overflow-y: auto;height: 250px;"></ul>
                </div>
                <div class="layui-col-xs3">
                    <ul id="departmentTree" class="dtree" data-id="0" style="overflow-y: auto;height: 250px;"></ul>
                </div>
                <div class="layui-col-xs3">
                    <ul id="jobTree" class="dtree" data-id="0" style="overflow-y: auto;height: 250px;"></ul>
                </div>
                <div class="layui-col-xs3">
                    <ul id="jobScoreTree" class="dtree" data-id="0" style="overflow-y: auto;height: 250px;"></ul>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item layui-col-xs12" id="roleInfoSection" {{#equal isAdmin 1}}style="display:none;"{{/equal}}>
            <span class="hr-title">角色信息</span><hr>
        </div>
        <div class="layui-form-item layui-col-xs12" id="roleListSection" {{#equal isAdmin 1}}style="display:none;"{{/equal}}>
            <div id="roleList">
                <!-- 角色列表将通过AJAX加载 -->
            </div>
        </div>
        
        <div class="layui-form-item layui-col-xs12">
            <span class="hr-title">考勤信息</span><hr>
        </div>
        <div class="layui-form-item layui-col-xs12">
            <label class="layui-form-label">考勤段<i class="red">*</i></label>
            <div class="layui-input-block" id="checkTimeBox">
                <!-- 考勤时间段会通过AJAX加载 -->
            </div>
        </div>
        
        <div class="layui-form-item layui-col-xs12">
            <div class="layui-input-block">
                <button class="winui-btn" id="cancle"><language showName="com.skyeye.cancel"></language></button>
                <button class="winui-btn" lay-submit lay-filter="formEditUser"><language showName="com.skyeye.save"></language></button>
            </div>
        </div>
        {{/bean}}
    </script>

    <script type="text/html" id="checkTimeStrTemplate">
        {{#each rows}}
            <input type="checkbox" name="checkTime" title="{{name}}[{{startTime}} ~ {{endTime}}]{{typeName}}" rowId="{{id}}" lay-filter="checkTimeProperty" />
        {{/each}}
    </script>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript">
        layui.config({ base: '../../js/tenant/' }).use('userEdit');
    </script>
</body>

</html>